$listFormControlMargin:       0 0 2px 0;
$formControlHeight:           28px;
$formWidth:                   1100px; // 900px;

$containerBorderColor:        #cccccc;
$controlBorderColor:          #cccccc;
$controlRequiredBorderColor:  #f7b7ad;
$controlBgColor:              #ffffff;

$propNameBgColor:             #fcfcfc;
$formBgColor:                 #ffffff;
$formTblPaddingTB:            10px;
$formTblPaddingLR:            8px;
$formTblPadding4E:            3px;

$listTableBorderColor:        #cccccc;
$listBtnColor:                #ffffff;
$listBgColor:                 #ecf0f5;
$listLinkColor:               #0f0f0f;
$listOddColor:                transparent;
$listEvenColor:               #f1f1f1;
$listToolbarBorderColor:      #f1f1f1;
$listHeaderBorderColor:       #d1d5e0;	// breadcrumb
$listSortableColor:           #808080;  // gray;
$listSortableActiveColor:     #000000;
$listPaginationRadius:        5px;

$helpColor:                   #2aabd2;
$dataHoverBgColor:            #75B6EF;

$tabsTabColor:                #888;
$tabsTabActiveColor:          #555;

$maxWidth:                    100% !important;

/* 页面遮罩
----------------------------------*/
#o-cover {
	position: fixed;
	left: 0;
	right: 0;
	height: 100%;
	top: 0;
	opacity: 0;
}

/* 等待提示窗口
----------------------------------*/

#o-processing-dlg {
	.modal-dialog {
		width: 20%;
		margin-top: 200px;
		min-width: 330px;
		min-height: 180px;
		opacity: 0.85;
		font-size: 18px;
		.modal-content {
			border-radius: 5px;
			.modal-body {
				text-align: center;
				height: 180px;

				.overlay {
					text-align: center;
					margin-top: 20px;
					i {
						font-size: 50px;
						color: lightblue;
					}
				}
			}
		}
	}
}

/* 列表视图
----------------------------------*/
body.o-list,
body.o-form div.o-list {

	// 背景色，同 AdminLET 的 .content-wrapper
	background-color: $listBgColor;

	a {
		color: $listLinkColor;
		text-decoration: none;
	}

	/** 页边距等　*/
	div.body {
		$paddingLR: 20px;

		min-height: 100%;
		padding: 18px $paddingLR 1px;

		h1:first-child, .h1:first-child,
		h2:first-child, .h2:first-child,
		h3:first-child, .h3:first-child {
			margin-top: 0; // 前面有 padding 了，这里取消 margin-top
		}

		.box {
			.toolbar {
				padding: 5px ($paddingLR - 1); // 下面定义了 1px 的 border，所以这里减1
				min-height: 23px;
			}
			.list {
				padding: $paddingLR;
			}
			.pagination, .buttons {
				padding: 0 $paddingLR 15px;
			}
			.buttons.buttons-top {
				padding: 15px $paddingLR 0px;
			}
			.pagination.fixed {
				height: 45px;
			}
		}
	}

	/** 面包屑导航 */
	.content-header {
		padding: 0;
		border-bottom: 1px solid $listHeaderBorderColor;
		margin-bottom: 15px;

		> .breadcrumb {
			position: static;
			float: none !important;
			font-size: 16px;
			padding: 0px 5px 8px;

			/** 文字大小 */
			li, li a {
				font-size: 15px;
				font-weight: 800;
			}
			/** 图标大小 */
			i:before {
				font-size: 20px;
			}
			/** 图标和文字间距　*/
			li a {
				margin-right: 0px;
			}
			li i {
				margin-right: 5px;
			}
		}
	}

	/** 顶部工具栏（含搜索栏） */
	.toolbar {
		//width: 100%;
		//background-image: none !important;
		//display: table;
		border: 1px solid $listToolbarBorderColor;

		div.left {
			padding: 5px 10px 5px 0;
		}
		div.right {
			padding: 5px 0 5px 10px;
			//text-align: right;
		}

		input, select, textarea {
			margin: $listFormControlMargin;
			//padding: 2px 4px;
		}
		// combobox 上下对齐
		.combobox-container > .input-group input {
			margin-top: 0px;
			margin-bottom: 0px;
		}
		// 搜索项比较多、换行的情况
		.multiple-lines {
			input, select, textarea,
			.combobox-container > .input-group {
				margin-top: 6px;
			}
			// IE9：搜索栏有多行时，不自动换行，只好取消 nowrap
			@at-root html.ie9 & {
				// 测试情况：
				// 加 span.nowrap，也就文字不换行，但是文字和输入框还是可能会分开；
				// IE9 下问题比较严重，同时设置 display: inline-block 会导致 combobox 错位，不设的话会完全不换行。
				//:empty { white-space: nowrap; }
				span.nowrap {
					white-space: normal !important;
					//display: inline-block;	// 导致 combobox 错位，但其他 input 可以
					//&:after { content: "."; font-size: 1px; color: transparent; }
				}
			}
		}

		/** 条件输入框 */
		.o-search-field {
			//-webkit-border-radius: 2px;
			//-moz-border-radius: 2px;
			//border-radius: 2px;
			//line-height: normal;
			//height: $formControlHeight;

			&.o-search-field-text {
				width: 100px;
			}
			&.o-search-field-number {
				width: 60px;
			}
			&.o-search-field-hour,
			&.o-search-field-minute {
				width: 130px;
				&.o-search-field-ranger {
					width: 250px;
				}
			}
			&.o-search-field-date {
				width: 100px;
				&.o-search-field-ranger {
					width: 185px;
				}
			}
			&.o-search-field-month {
				width: 80px;
				&.o-search-field-ranger {
					width: 145px;
				}
			}
			&.o-search-field-max {
				border-left-width: 0;
			}
		}

		/** 搜索按钮 */
		button.btn.o-search-submit {
			padding-left: 10px;
			padding-right: 10px;
		}
		/** 搜索按钮后的"更多"菜单 */
		.o-search-hasmore {
			button.btn.o-search-submit {
				border-right-width: 0;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			button.dropdown-toggle {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				padding-left: 0;
				padding-right: 0;
				> i {
					padding-right: 0
				}
			}
			.o-search-more {
				border-color: $listTableBorderColor;
				div.row {
					margin: 6px 15px;
					min-width: 340px;

					div._title {
						text-align: right;
						white-space: nowrap !important;
						padding-left: 0px;
						padding-right: 5px;
						// 文字超出部分自动替换成省略号
						//text-overflow: ellipsis;
						//overflow-x: hidden;
					}
					div._content {
						text-align: left;
						padding-left: 5px;
						padding-right: 20px;
					}
				}
			}
			li.footer {
				padding: 0;
				border-top: 1px solid $listTableBorderColor+34;
				text-align: center;
				border-bottom-width: 1px;
			}
		}
	}

	/** 数据列表 */
	.list table:not(.dialog) {
		border: 1px solid $listTableBorderColor;
		width: 100%;

		/** 单元格定宽 + 文字超出部分自动替换成省略号 */
		table-layout: fixed;
		th, td {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 1.2;
			padding: 10px;
		}

		/** 单元格边框颜色、背景色 */
		th, td {
			border-left: 1px solid $listTableBorderColor;
		}
		th {
			border-bottom: 1px solid $listTableBorderColor;
		}
		tfoot td, tfoot th {
			border-top: 1px solid $listTableBorderColor;
		}
		tbody tr {
			background: $listOddColor;
		}
		thead tr,
		tfoot tr,
		tbody tr:nth-child(2n) {
			background: $listEvenColor;
		}

		/** 表头：排序图标等 */
		thead {
			.sortable:after {
				float: right;
				color: $listSortableColor;
				display: inline-block;
				font: normal normal normal 14px/1 FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				// == .fa
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			.sortable:after {
				margin-top: 2px;
				// == .fa-sort:before
				content: "\f0dc";
			}
			.sortable.asc:after {
				color: $listSortableActiveColor;
				margin-top: 5px;
				// == .fa-sort-asc:before
				content: "\f0de";
			}
			.sortable.desc:after {
				color: $listSortableActiveColor;
				// == .fa-sort-desc:before
				content: "\f0dd";
			}
			th a,
			th.sortable a,
			th.sortable.asc a,
			th.sortable.desc a {
				background-image: none !important;
				width: initial;
				float: left;
				//font-size: 14px;
			}
		}

	}

	/** 翻页栏、操作栏 */
	.pagination, .buttons {
		//background-image: none !important;
		//border: none;
		// 覆盖 bs 的样式
		display: block;
		margin: 0;
		border-radius: initial;
	}
	.buttons {
		text-align: left;
	}
	.pagination {
		text-align: right;

		.o-pagination-pager, .o-pagination-go {
			border-width: 0;
			padding: 0;
		}

		/** 翻页器　*/
		.o-pagination-pager {
			.currentStep, .step, .prevLink, .nextLink {
				border: 1px solid $controlBorderColor;
				padding: 5px 10px;
				margin: 0;
				border-left: 0;
				height: $formControlHeight;
			}
			@at-root html.firefox & .currentStep, .step, .prevLink, .nextLink {
				padding: 4px 10px; // 保持 FF 下翻页链接高度和 o-pagination-go 一致
			}
			.currentStep {
				color: $listBtnColor;
			}
			:first-child {
				border-bottom-left-radius: $listPaginationRadius;
				border-top-left-radius: $listPaginationRadius;
				border-left: 1px solid $controlBorderColor;
			}
			:last-child {
				border-bottom-right-radius: $listPaginationRadius;
				border-top-right-radius: $listPaginationRadius;
			}
		}

		/** 输入页号跳转　*/
		@mixin o-pagination-go() {
			&.disabled {
				input:hover, input:focus, a:hover, a:focus {
					cursor: not-allowed;
				}
			}

			input.goLink {
				margin: 0 0 0 3px;
				padding: 3px 4px;
				width: 35px;
				border: 1px solid $controlBorderColor;
				border-bottom-left-radius: $listPaginationRadius;
				border-top-left-radius: $listPaginationRadius;
				height: $formControlHeight;
			}
			a.btn.goLink {
				margin-left: -1px;
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
				border-bottom-right-radius: $listPaginationRadius;
				border-top-right-radius: $listPaginationRadius;
				padding: 1px 4px;
				i {
					font-size: 20px;
					padding: 3px 8px;
				}
			}
		}
		.o-pagination-go {
			@include o-pagination-go()
		}
		@at-root div.dataTables_paginate .o-pagination-go {
			// 组件：dataTables
			@include o-pagination-go()
		}
	}

	/** 消息栏 */
	.alert {
		padding: 8px;
		margin-bottom: 15px;
	}
}

.toolbar {
	width: 100%;
	background-image: none !important;
	display: table;

	/** 修复 combobox 样式不统一的问题 */
	.combobox-container {
		//display: inline-block;
		vertical-align: top;

		> .input-group {
			//margin-top: 2px;
			margin-top: 0;

			input {
				margin-top: 0px;
				margin-bottom: 0px;
			}
			.dropdown-toggle {
				padding: 0 5px;
				box-shadow: none;
			}
		}
	}

	/** 覆盖 bs，修复输入框换行的问题 */
	.form-control {
		display: initial; // 默认 block
	}
}

/*body.o-form div.o-list, .modal-dialog {
	.list table {
		// 模态窗和表单内的列表行，都显示一种颜色 -- 废弃：这样看不出表格线了
		tbody tr:nth-child(2n) {
			background: $listOddColor;
		}
	}
}*/

// 嵌入的列表
// 模态窗里的列表，如：编辑仿真数据、选择关联流程
// 嵌入在表单中的 iframe 列表，如：数据字典/系统角色的修改日志，系统角色里的关联用户
@mixin list-embeded() {
	&.o-list div.body,
	div.o-list div.body {
		padding: 0;
		.box {
			border-top: 0;
			margin-bottom: 0;

			.list {
				padding: 0;
			}
			.pagination, .buttons {
				padding: 10px; // what about .buttons-top?
			}
			.pagination.fixed {
				height: 40px;
			}
		}
	}

	.toolbar {
		border-bottom: 0;
		div.left, div.right {
			padding: 0 0 10px 0;
		}
	}
}

div.modal-dialog {
	@include list-embeded();
}

div.o-list-embeded,
body.o-list-embeded {
	@include list-embeded();

	background-color: inherit;
	&.o-list div.body,
	div.o-list div.body {
		.box {
			box-shadow: none;
			.pagination {
				padding-bottom: 0px;
			}
		}
	}
}

/* 表单视图
----------------------------------*/
body.o-form {
	#layoutBody {
		//width: 70%;
		//min-width: $formWidth;
		margin: 5px auto;

		> .body {
			width: 70%;
			min-width: $formWidth;
			margin: 0px auto; // 横向居中
			border: 1px solid $containerBorderColor;
			padding: 0;
			background-color: $formBgColor;

			> *:not(form), .dialog {
				padding: 0 50px;
			}

			/** 消息栏 */
			.alert {
				padding: 8px;
				margin: 10px 50px 0;
			}

			/* 标题 */
			> h1 {
				background: $containerBorderColor;
				margin: 0;
				padding: 15px 50px;
				//font-size: 24px;
			}

			/* 操作栏按钮 */
			.buttons {
				background: $containerBorderColor;
				padding: 5px 50px;
				height: 50px;
				line-height: 40px;
			}
			.dialog form .buttons {
				// 多页签时，嵌在表单下面的、而不是在表单最底部的小操作栏
				padding-left: 20px;
			}

			/** 表格位置 */
			.dialog {
				padding-top: 14px;
				padding-bottom: 14px;
			}

			/** 大文本容器 @see formatText、formatJson */
			.o-text-mass {
				display: none;
				word-wrap: break-word;
				margin: 0;
				padding: 0;
				border: none;
			}
		}
	}
}

body {
	.dialog .tab-pane,
	.dialog .o-inner-table,
	div.modal-dialog {
		table th {
			font-weight: normal;
		}
	}

	/** 模态窗 */
	div.modal-dialog {
		div.dialog {
			//padding: 0px 10px;
			padding: 0;
		}
	}

	/* 表格：列宽定义 */
	.dialog table,
	table.dialog {
		@mixin columns() {
			// 1列属性（默认）
			tr.prop > td.name,
			&.column1 tr.prop > td.name {
				width: 20%;
			}
			&.column1 tr.prop > td.value {
				width: 80%;
			}
			// 2列属性
			&.column2 tr.prop > td.name {
				width: 15%;
			}
			&.column2 tr.prop > td.value {
				width: 35%;
			}
			// 3列属性
			&.column3 tr.prop > td.name {
				width: 12%;
			}
			&.column3 tr.prop > td.value {
				width: 21.3%;
			}
			// 4列属性
			&.column4 tr.prop > td.name {
				width: 9%;
			}
			&.column4 tr.prop > td.value {
				width: 16%;
			}
			// N列属性
			&.columnx tr.prop > th.name,
			&.columnx tr.prop > td.name,
			&.columnx tr.prop > td.value {
				width: auto;
			}
		}
		@include columns();
		&.column1 tr.prop > td.value table {
			@include columns();
		}
		&.column2 tr.prop > td.value table {
			@include columns();
		}
		&.column3 tr.prop > td.value table {
			@include columns();
		}
	}

	/** 表格：表单属性 */
	.dialog table,
	table.dialog {
		width: 100%;

		tr.prop {
			> td, > th {
				border: 1px solid $containerBorderColor;
				padding: $formTblPaddingTB $formTblPaddingLR;
				vertical-align: top;
				//line-height: 26px;

				label {
					margin: 0px;
					//line-height: 26px;
				}

				// 多行输入框上下会紧挨在一起
				// 如角色编辑的“二次开发”页签、流程实例维护里督办设置（configProcessDefinitionByAdmin.gsp）的两个 osmField
				input.max[type='text'] + select.max, select.max + input.max,
				input.max[type='text'] + textarea, textarea + input.max,
				select.max + textarea, textarea + select.max,
				input.max[type='text'] + input.max, select.max + select.max, textarea + textarea
				input.long[type='text'] + input.long, select.long + select.long,
				//.o-tree-field + .o-tree-field textarea, .o-tree-field + .o-tree-field input,
				.o-tree-field + .o-tree-field, // 4: 如果两个 osmField 在一排不换行，则会导致第二个的 i 图标高度不正确
				br ~ .input-group, br ~ input[type='text'], br ~ select {
					margin-top: 5px;
				}
				//input, select, textarea {
				//	margin: 3px 0px;	// 3 + 5 = 8
				//}
				//.input-group {
				//	padding: 3px 0px;	// 3 + 5 = 8
				//	input, select, textarea {
				//		margin: 0px;
				//	}
				//}
			}

			> td.title {
				height: 33px;
				text-align: center;
				vertical-align: middle;

				&.bgcolor {
					background-color: $propNameBgColor;
				}
			}

			> td.name, > td.nameX,
			> th.name, > th.nameX {
				background-color: $propNameBgColor;
				white-space: nowrap;
			}

			> td.name, > td.nameX {
				text-align: right;

				&:after {
					content: ':';
				}
			}

			> th.name, > th.nameX {
				text-align: center;
			}

			> td.value, > td.valueX {
				text-align: left;
				word-break: break-all; // 自动换行
				//width: 80%;

				.form-control {
					height: 26px; // 覆盖 bs 的 34px
				}
				textarea.form-control {
					height: auto;
				}
				input[type='text'], input[type='password'] {
					padding-left: 4px;
				}
				select {
					padding-left: 0;
				}
				textarea {
					width: 100%;
				}
			}
		}
	}

	/** 表单控件 */
	.dialog .input-group {
		&.textarea {
			width: 100%;
		}

		textarea, input[type='text'], input[type='password'] {
			width: 100%;
		}
		&.input-group-o-field-help {
			textarea, input[type='text'], input[type='password'] {
				width: 98% !important; // 配合标签 o:field，避免 100% 宽的情况下，帮助图标显示位置不正确。
			}
		}

		// BROFWK-652
		& {
			display: inline-table; // bs 默认是 table，会导致两个控件自动换行
			white-space: nowrap;   // 内部不换行
		}

		.input-group-addon {
			padding: 0 5px;
			/*&.dropdown-toggle {
				padding: 0 1px;
			}*/
		}
		input + .input-group-addon,
		input + script + .input-group-addon {
			border-left: 0px; // 同 bs 的 .input-group-addon:last-child
		}
	}
	.dialog td > .input-group {
		// 不作用于所有 input-group，避免 combobox 显示错位
		width: 180px;
		// NOTFIX 避免 o:field 内的 o:osmFiled 显示宽度不正确：目前只能两个都设置 class 为 max --> BROFWK-673
		/*&.max {
			width: $maxWidth;
			textarea, input {
				width: $maxWidth;
			}
		}*/
	}
	/** 表单里的按钮 */
	.dialog td > .btn {
		margin: 5px 6px 5px 0px; // 左边靠边对齐
	}
	.dialog td.value > .btn {
		padding: 3px 5px;
		margin: 5px 6px; // 左边留一点，避免和表格线重合
	}

	/** 表格内部的子表格，如动态表 */
	.dialog {
		.o-inner-table {
			padding: 0 !important;
			/*&.o-inner-table-noborder-top {
				tr:first-of-type {
					td, th {
						border-top: none;
					}
				}
			}
			&.o-inner-table-noborder-bottom {
				tr:last-of-type {
					td, th {
						border-bottom: none;
					}
				}
			}*/
		}

		.o-inner-table table,
		table.o-inner-table {
			border: none;
			width: 100%;

			th, td {
				border: 1px solid $containerBorderColor;
				padding: $formTblPaddingTB $formTblPaddingLR;
				text-align: left;
			}

			// 左侧边框去掉
			th, td,
			tr.prop > th, tr.prop > td,
			tr.prop > th.name, tr.prop > td.name {
				border-left: none;
			}
			// 右侧边框去掉
			th:last-of-type, td:last-of-type {
				border-right: none;
			}

			th {
				background-color: $propNameBgColor;
				text-align: center;
				white-space: nowrap;
			}

			// 输入框
			// 注：如果一个单元格中有多个输入框，则需要手动设置每个输入框的宽度，以免表格变形
			td > .input-group {
				//white-space: nowrap;
				width: 100%;
				.input-group-addon {
					border-width: 0;
					border-bottom: 1px solid $controlBorderColor;
				}
				textarea ~ .input-group-addon {
					border-width: 1px;
				}
			}
			//td input:not([type=checkbox]):not([type=radio]):not([type=file]),
			td select, td input, td input[type=file] {
				border: none;
				border-bottom: 1px solid $controlBorderColor;
				width: 100%;
			}
			td {
				// 使 IE 和 Chrome、FF 高度保持一致，没有顶部边框也是理由之一
				// TODO 在FF下将select转成combobox后，又高出一个像素
				select {
					height: $formControlHeight + 1;
				}
				/*@at-root html.firefox & select {
					height: $formControlHeight;
				}*/
				@at-root html.webkit & input:not([type=checkbox]):not([type=radio]) {
					height: $formControlHeight - 1;
				}
				@at-root html.ie11 & select {
					height: $formControlHeight;
				}
			}
			.combobox-container .dropdown-toggle {
				border-top: none;
				border-right: none;
			}
			input[required], select[required] {
				border-bottom: 1px solid $controlRequiredBorderColor;
			}
		}

		.o-inner-table.editable table,
		table.o-dynamic-table-editable {
			td {
				padding: $formTblPadding4E;
			}
			th {
				padding-left: $formTblPadding4E;
				padding-right: $formTblPadding4E;
			}
		}

		/** 动态表 */
		.o-dynamic-table-container {
			table.o-dynamic-table {
				tbody.template {
					display: none;
				}
				&.o-dynamic-table-readonly {
					.editable {
						display: none;
					}
				}
			}
			// 增减行的操作按钮
			button.add-row-t, button.add-row-b {
				margin-right: 0px;
				margin-left: $formTblPaddingLR;
			}
			button.add-row-t i:before, button.add-row-b i:before, button.add-row-r i:before {
				content: "\f0fe"; // fa-plus-square
			}
			button.del-row-t i:before, button.del-row-b i:before, button.del-row-r i:before {
				content: "\f146"; // fa-minus-square
			}
			.o-dt-btn-group-r {
				width: 60px; // 避免两个按钮换行即可
				button.btn {
					margin: 0;
					&.del-row-r {
						border-left: 0;
					}
					i {
						padding-left: 0;
						padding-right: 0;
					}
				}
			}
		}

	}

	/** 常用的表单控件宽度 */
	.short {
		width: 9em !important;
	}
	.middle {
		width: 25em !important;
	}
	.long {
		width: 42em !important;
	}
	.max {
		width: $maxWidth;
	}

	/** 常用表头宽度 */
	th, td {
		&.o-checkbox {
			width: 39px !important;
		}
		&.o-datetime-m {
			width: 114px !important; // 分钟
		}
		&.o-datetime {
			width: 140px !important; // 秒
		}
		&.o-datetime-s {
			width: 155px !important; // 秒+
		}
		&.o-date {
			width: 100px !important; // 日期
		}
	}
}

body.o-list, body.o-form {
	/** 消息栏：恢复 bs 的颜色，AdminLTE 的颜色有点太亮 */
	.alert a {
		text-decoration: none;
		color: #6495ED;
	}

	// TODO 要不要根据不同主题，设置不同颜色？
	// TODO 样式还需美化！
	.alert.alert-info {
		color: #31708f !important;
		background-color: #d9edf7 !important;
		border-color: #bce8f1 !important;
	}
	.alert.alert-error {
		color: #a94442 !important;
		background-color: #f2dede !important;
		border-color: #ebccd1 !important;
	}
	.alert.alert-warning {
		color: #8a6d3b !important;
		background-color: #fcf8e3 !important;
		border-color: #faebcc !important;
	}
}

/** 组件：选择树（treeField、osmField）
----------------------------------*/

span.o-tree-field-icon {
	white-space: nowrap;
	display: inline-table;
	/*img {
		cursor: pointer;
		//position: relative;
		//top : 3px;
		padding-left: 1px;
		min-width: 16px;
		min-height: 16px;
		vertical-align: baseline;
	}*/
	&.short, input.short, textarea.short {
		width: 7.5em !important;
	}
	&.middle, input.middle, textarea.middle {
		width: 23.5em !important;
	}
	&.long, input.long, textarea.long {
		width: 40.5em !important;
	}

	// @see form-control
	@at-root span.o-tree-field textarea {
		height: auto;
	}
	textarea {
		float: left; // 否则图标和 textarea 的高度上下对不齐
	}
	/*@at-root body .dialog table tr.prop > td &.o-tree-field-textarea ~ br {
		~ .input-group, ~ input[type='text'], ~ select {
			margin-top: 0;
			margin-bottom: 5px;
		}
	}*/
	/*input.max, textarea.max {
		width: 98% !important;
	}*/
	/*textarea {
		width: 98% !important;
	}*/
	/*&.input-group {
		width: $maxWidth;
	}*/
}

.o-tree-selector {
	a, a:link, a:visited, a:active, a:hover {
		color: #000000;
		text-decoration: none;
	}
	.o-tree-selector-title {
		margin-top: 0px;
		text-align: center;
	}
	.o-tree-selector-maintable {
		//margin-top: 5px;
		//margin-bottom: 5px;
		text-align: center;

		// 防止已选列表单元格在 IE10 下没有下边框
		border: none !important;
		border-collapse: separate !important;
		border-top: 1px solid $containerBorderColor !important;
		border-left: 1px solid $containerBorderColor !important;
		td, th {
			border-top: 0 !important;
			border-left: 0 !important;
			border-right: 1px solid $containerBorderColor !important;
			border-bottom: 1px solid $containerBorderColor !important;
		}

		.o-tree-selector-helptd {
			text-align: center !important;
			padding: 4px;
			color: $helpColor;
			background-color: #EBF5FF;
		}
		.o-tree-selector-filtertd {
			text-align: center !important;
			vertical-align: middle !important;
			white-space: nowrap;
			padding: 5px 5px;
			.filter {
				margin: 2px 0;
				//padding: 2px 4px;
				//height: $formControlHeight;
			}
		}
		.o-tree-selector-selectedtd {
			text-align: center !important;
			vertical-align: middle !important;
			white-space: nowrap;
			padding: 5px;
		}
		.o-tree-selector-containertd {
			padding: 0;
			.containerDiv {
				border: none;
				text-align: left;
				table {
					border-width: 0px;
					td, th {
						padding: 0px;
						text-align: left;
					}
				}
				.treeDiv {
					overflow: auto;
					float: left;
					border-right: 1px solid $containerBorderColor;
					-moz-user-select: none;
					padding: 2px 0 0 2px;
					div {
						white-space: nowrap;
						a {
							cursor: pointer;
						}
					}
				}
				.selectedDiv {
					overflow: auto;
					float: right;
					border-left: 1px solid $containerBorderColor;
					cursor: default;
					-moz-user-select: none;
					> div {
						padding: 2px 4px;
						border-bottom: 1px solid silver;
						white-space: nowrap;
					}
					div.fixed * {
						color: brown;
					}
				}
			}
		}
	}
}

// 一棵树时，高宽设得大些
//.o-tree-selector-single
.o-tree-selector {
	$height: 350px;

	.o-tree-selector-filtertd {
		width: 55% !important;
		.filter {
			width: 80%;
		}
	}
	.o-tree-selector-selectedtd {
		width: 45% !important;
	}
	.containerDiv {
		height: $height;
		width: 100%;
	}
	.containerDiv .treeDiv {
		width: 53.5%;
		height: 100%;
	}
	.containerDiv .selectedDiv {
		width: 43.5%;
		height: 100%;
	}
}

// 多棵树时，dialog的宽度设为树的数量×一个定宽（@see osm_selector.js）
.o-tree-selector-multi .o-tree-selector {
	.containerDiv {
		height: 180px;
	}
}

/* 组件：页签 tabs
----------------------------------*/
body {
	// 页签，用默认的样式
	//td div.tab-content
	div.tab-content {
		.nav-tabs {
			> li.active a {
				color: $tabsTabActiveColor;
			}
			a {
				color: $tabsTabColor;
			}
		}

		.tab-pane {
			> table:first-child,
			> meta:first-child + table,
			> form > table:first-child {
				> tr:first-of-type,
				> * > tr:first-of-type {
					> td, > th {
						border-top: none;
						> .btn {
							margin: 5px 6px 5px 0px; // 左边靠边对齐
						}
					}
				}
			}
			> table.o-inner-table {
				// 恢复左/右侧边框
				tr, th, td {
					border-left-width: 1px;
					border-left-style: solid;
					border-right-width: 1px;
					border-right-style: solid;
				}
			}
		}
	}

	// 列表里和 toolbar 相邻的页签
	// 如：workbench 里的待办列表，但不同于系统信息的页签
	&.o-list .box .toolbar ~ .tab-content {
		.nav-tabs {
			padding-left: 19px; // 等于 .toolbar 及其内部的 div.left 的左侧距离之和
			margin-top: -1px;
		}
	}

	// 表单上的页签
	/*&.o-form div.dialog > .tab-content {
		.nav-tabs a {
			font-size: 16px;
		}
	}*/
}

/* 组件：daterangepicker
----------------------------------*/
.daterangepicker {
	// 修正位置
	&.opensleft, &.opensright, &.openscenter {
		.calendar {
			&.left {
				float: left;
			}
			&.right {
				float: right;
			}
		}
		.ranges {
			clear: both;
			float: right;
		}
	}
	// 修正（恢复）被覆盖的 padding
	input.input-mini {
		padding: 0 6px 0 28px;
	}
}

/* 组件：typeahead (autocomplete)、combobox 等
-----------------------------------------------*/
ul.typeahead.dropdown-menu > .active {
	> a, > a:hover, > a:focus {
		background-color: $dataHoverBgColor;
	}
}

.typeahead-long {
	max-height: 190px; // 默认 300px
}

//.combobox-container .input-group > input {
//	padding-right: 0px;
//	margin-right: 0px;
//}

.combobox-container {
	// 避免input + select(combobox) 中间自动换行，如 BROFWK-605
	display: inline-block;
	/*div.input-group {
		display: inline-table; --> 前面设置为全局的了
	}*/
}

/* 组件：google code pretify
---------------------------------------------------*/
pre.prettyprint {
	// 重置为 bs 的样式
	border: 1px solid #ccc !important;
	padding: 9.5px 3px !important;

	// 显示所有行号；默认为 none，只显示 5 的倍数的行号
	li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
		list-style-type: decimal !important;
	}
}

code.prettyprint {
	// bs 对 code 添加了 padding，这里将其对齐
	br + span.pln {
		padding-left: 4px;
	}
}

/* 组件：dataTables
---------------------------------------------------*/
body.o-list .list {
	table.dataTable {
		border-left: none;

		td, th {
			&.o-datatables-checkbox,
			&.o-datatables-radiobox {
				width: 18px !important;
			}
		}
	}

	> div.dataTables_wrapper {
		margin-top: -5px;
		div.row:last-child {
			padding-top: 5px;
			margin-bottom: -10px;
			div:last-child {
				// paginate 和 lengthMenu 保持一致
				padding-top: 2px;
			}
		}

		/** 第 x 至第 x 条记录，共 x 条，每页显示 xx 条。*/
		div.dataTables_info,
		div.dataTables_length {
			display: inline-block;
		}

		/** 翻页栏 */
		div.dataTables_paginate {
			float: right;
			margin-right: 0px;

			ul.pagination {
				float: right;
				padding-right: 10px;
				height: $formControlHeight;
				a {
					height: $formControlHeight + 2;
					padding: 5px 10px;
				}
				> li:first-child > a {
					border-top-left-radius: $listPaginationRadius;
					border-bottom-left-radius: $listPaginationRadius;
				}
				> li:last-child > a {
					border-top-right-radius: $listPaginationRadius;
					border-bottom-right-radius: $listPaginationRadius;
				}
			}

			.o-pagination-go {
				float: right;
				padding: 0;
				margin: 2px 0;
				height: $formControlHeight;

				input.goLink {
					margin-left: 0;
					vertical-align: middle;
					height: $formControlHeight + 2;
				}
				a.btn.goLink {
					padding: 1px 2px;
					height: $formControlHeight + 2;
				}
				//@include o-pagination-go()
			}
		}
	}
}

.dialog .dataTables_wrapper {
	.row:first-child {
		.dataTables_length, .dataTables_filter,
		.dataTables_info, .dataTables_paginate {
			padding-left: $formTblPaddingLR;
			padding-right: $formTblPaddingLR;
			padding-top: $formTblPaddingTB;
		}
	}
	.row:last-child {
		.dataTables_length, .dataTables_filter,
		.dataTables_info, .dataTables_paginate {
			padding-left: $formTblPaddingLR;
			padding-right: $formTblPaddingLR;
		}
	}

	table.dataTable {
		// 覆盖 dt 默认值（separate），避免表格线的粗细问题：如 Group 的 show
		border-collapse: collapse !important;
	}
}

.dataTables_wrapper {
	/** 搜索框 */
	.dataTables_filter input {
		font-size: 1em;
	}

	/** 表头：排序图标 */
	table.dataTable {
		thead .sorting:after {
			font-family: FontAwesome;
			// == .fa-sort:before
			content: "\f0dc";
		}
		thead .sorting_asc:after {
			font-family: FontAwesome;
			color: $listSortableActiveColor;
			// == .fa-sort-asc:before
			content: "\f0de";
		}
		thead .sorting_desc:after {
			font-family: FontAwesome;
			color: $listSortableActiveColor;
			// == .fa-sort-desc:before
			content: "\f0dd";
		}
	}

	/** 没有搜索结果的提示 */
	.dataTables_empty {
		text-align: center !important;
	}
}

/* 组件：jstree
---------------------------------------------------*/
.jstree-container-ul {
	.jstree-icon.jstree-themeicon {
		margin-left: -3px !important;
		margin-right: 0 !important;
	}
}

// 避免右键菜单被隐藏
ul.vakata-context {
	z-index: 900;
}

.sidebar .jstree {
	padding-top: 10px;
}

/* 组件：mCustomScrollbar
---------------------------------------------------*/
.mCSB_scrollTools {
	// 将滚动条缩小到2个像素
	width: 2px;

	.mCSB_dragger .mCSB_dragger_bar {
		width: 2px;
		background-color: rgba(0, 0, 0, 0.2) !important;
	}

	&.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
		height: 2px;
		background-color: rgba(0, 0, 0, 0.2) !important;
	}
}

section.sidebar {
	&.mCustomScrollbar {
		padding-bottom: 0;
	}

	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
		right: 5px;
	}

	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
		bottom: 10px;
	}

	.mCSB_container_wrapper {
		margin-right: 10px;
		margin-bottom: 15px;
	}
}

/* 组件：OrgChart
---------------------------------------------------*/

.orgchart-container {
	/*width: calc(100% - 24px);*/
	/*border: 2px dashed #aaa;*/
	/*padding: 20px;*/
	margin: 10px;
	width: 100%;
	border-radius: 5px;
	overflow: auto;
	text-align: center;
	min-height: 600px;

	.orgchart {
		background-image: none;

		.node .title {
			/* 设置高度 */
			height: 50px !important;
			line-height: 50px !important;
			border-radius: 4px 4px 4px 4px ;
		}
		.node.hasContent .title {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		.node .content {
			/* 修复被 AdminLTE 覆盖的设置 */
			min-height: 40px;
			padding-top: 10px;
			padding-bottom: 10px;
			//height: auto;
		}

		/* 左侧图标居中 */
		.node .title .symbol {
			margin-top: 18px !important;
			margin-left: 6px !important;
		}

		/** 设置公司、部门的颜色 */
		.dummy .title {
			background-color: grey;
		}

		.company .title {
			background-color: #006699; /*#009933;*/
		}

		.department .title {
			background-color: rgba(217, 83, 79, 0.8); /* default color */
		}

		/** 链接的颜色 */
		.title a {
			color: #fff;
		}
	}
}

